<template>
  <div class="senderBox">
    <group title="姓名">
      <x-input  name="username" placeholder="请输入姓名" is-type="china-name"></x-input>
    </group>
    <group title="电话">
      <x-input  name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
    </group>

    
    <group title="地址">
       <popup-picker placeholder="请选择您的地址" value-text-align="left" show-name :data="adressList" :columns="3" v-model="adressListItem" ref="picker3"></popup-picker>
     </group>
    <group title="详细信息">
      <x-input  placeholder="请输入详细信息" :min="2" :max="20"></x-input>
    </group>
    <group class="senderBoxBtn">
      <x-button  type="primary" link="/" class="">添加</x-button>
    </group>
    <group>
      <x-address @on-hide="logHide" @on-show="logShow" title="title" v-model="value" :list="addressData" placeholder="请选择地址" inline-desc="可以设置placeholder"></x-address>
      <cell title="上面value值" :value="value"></cell>
    </group>
  </div>
</template>

<script>
import { XInput ,Group,GroupTitle,XButton,Picker,PopupPicker,XSwitch,Divider,Cell,XAddress,ChinaAddressV3Data} from 'vux'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      adressListItem:[],
      adressList:[
        {name: '中国',value: 'china',parent: 0},
        {name: '美国',value: 'USA',parent: 0},
        {name: '中东',value: 'USAs',parent: 0},
        {name: '广东',value: 'china001',parent: 'china'},
        {name: '广西',value: 'china002',parent: 'china'},
        {name: '广西2',value: 'china0021',parent: 'china001'},
        {name: '美国001',value: 'usa001',parent: 'USA'},
        {name: '美国002',value: 'usa002',parent: 'USA'},
      ]
    }
  },
  methods:{
     change (value) {
      console.log('new Value', value)
    }
  },
  components:{
    XInput,
    Group,
    GroupTitle,
    XButton,
    Picker,
    PopupPicker,
    XSwitch,
    Divider,
    Cell,
    XAddress,
    ChinaAddressV3Data
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

